import React, { useState, } from 'react';
import { Button, Input, Form, Checkbox } from 'react-vant';
import style from '../view/login.module.css';
import { useNavigate } from 'react-router-dom';
import { loginList } from '../request/api';
import {useSelector,useDispatch}from 'react-redux'
import {addUser,addHistory, } from '../store/userSlice'
export default function ZinUserLogin() {
    const dispatch =useDispatch()
    const [phone, setPhone] = useState('');
    const [passWord, setPassWord] = useState('');
    const [errorMessage, setErrorMessage] = useState('');
    let Navigate = useNavigate();

    const loginBtn = () => {
        if (!phone || !passWord) {
            alert('请输入手机号和密码');
            return;
        }

        loginList({phone, passWord: passWord })
            .then(res => {
                if (res.data.code=== 200) {
                    alert("登录成功");
                    let arr=res.data.data

                    dispatch(addUser({ arr })); 
                    Navigate('/zin');
                } else {
                    alert(res.data.msg);
                }
            })
            .catch(error => {
                alert(`登录请求出错，请稍后再试`);
            });
    };

    return (
        <>
             <div>
            <h2>登录</h2>
            <input
                type="text"
                placeholder="请输入手机号"
                value={phone}
                onChange={(e) => setPhone(e.target.value)}
            />
            <input
                type="password"
                placeholder="请输入密码"
                value={passWord}
                onChange={(e) => setPassWord(e.target.value)}
            />
            <button onClick={loginBtn}>登录</button>
            {errorMessage && <p style={{ color:'red' }}>{errorMessage}</p>
            }
        </div>
        </>
    );
}
